<template>
	<div class="box">
		<view class="headimg">
			<!-- <van-image round width="8rem" height="8rem" :src="avator ? avator : 'https://img.yzcdn.cn/vant/cat.jpeg'" -->
			<!-- 		<van-image round width="8rem" height="8rem" :src="avator"
			custom-class="my-custom-class" @click="getimg" /> -->
			<view class="cu-avatar img round margin-left" :style="{ 'background-image': 'url(' + avator + ')' }"
				@click="getimg"></view>
		</view>
		<view>
			<form class="form">
				<view class="cu-form-group">
					<view class="title">昵称:</view>
					<input v-model='Name' name="input" :disabled='transe' />
				</view>
				<view class="cu-form-group">
					<view class="title">手机号:</view>
					<input v-model='phonenumber' name="input" :disabled='transe' />
				</view>
				<view class="cu-form-group">
					<view class="title">性别:</view>
					<input v-model='sex' name="input" :disabled='transe' />
				</view>
				<view class="cu-form-group">
					<view class="title" style="margin-right: 0;">标签:</view>
					<view class="tags" style="display: flex;margin-left: -4vw;margin-right: 2vw;">
						<view class='cu-tag round' sm v-for="(item, index) in TagList" :key="index">{{ item }}
							<view class='cu-tag badge' v-if='!transe' @click="DelectTag(item)">×</view>
						</view>
					</view>
					<button class='cu-btn bg-green shadow' sm v-if='!transe' @click="addTags">add</button>
				</view>
			</form>
		</view>
		<view class="btn">
			<button class="cu-btn bg-cyan shadow" @click="tranT" v-if='transe'>点击编辑</button>
			<button class="cu-btn bg-gradual-blue shadow" @click="tranF" v-else>点击保存</button>
		</view>
	</div>


	<view class="cu-modal show" v-show="ShowDialog" style="z-index: 5;">
		<view class="cu-dialog" style="width: 50vw;">
			<view class="padding-sm bg-white">
				<input placeholder="请输入标签(不超过5字)" name="input" v-model="TagValue" />
				<view class="action" style="margin-top: 20px;">
					<button class="cu-btn sm" @tap="sureDialog">确定</button>
					<button class="cu-btn sm margin-left" @tap="hideModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped>
.box {
	width: 100vw;
	background-color: #fff;
	padding-bottom: 50px;
	height: 90vh;

}

@media screen and (min-width: 1200px) {
	.box {
		width: 30vw;
		padding-top: 50px;
		background-color: rgba(243, 243, 243, 0.934);
		height: 90vh;
		padding-bottom: 50px;

	}
}

.cu-form-group .title {
	min-width: calc(4em + 15rpx);
}

.cu-form-group {
	margin-top: 30rpx;
}

.form {
	position: relative;
	z-index: 5;
}

.btn {
	width: 100%;
	text-align: center;
	margin: 30rpx auto;
}

.bg {
	width: 100%;
	height: 1103rpx;
	position: absolute;
	z-index: 0;
}

.headimg {
	position: relative;
	padding-top: 20%;
	text-align: center;
}

.img {
	margin: 0 auto;
	width: 200px;
	height: 200px;
}
</style>

<script>
import {
	mapState
} from 'vuex';
// import headimg from '@/modul/Aboutme/headimg.vue'
// import dialog_remind from '@/modul/common/dialog_remind.vue'
import {
	getuserInfo,
	putuserInfo,
	uploadimg
} from '@/store/api.js'
export default {
	components: {
		// headimg,
		// dialog_remind
	},
	mounted() {
		console.log('这个是avator:      ' + this.avator)
		// 调用 getuserInfo 函数，并使用 Promise 的 then 方法来获取成功获取到的用户信息数据
		getuserInfo().then(data => {
			// console.log('调用')
			console.log("成功获取用户信息：", data);
			this.Name = data.data.userName
			this.avator = data.data.avatar ? data.data.avatar :
				'http://8.146.208.139:3000/avator/orignavator.png'
			this.phonenumber = data.data.phoneNumber
			this.sex = (data.data.sex == 0) ? '男' : '女'
			this.TagList = data.data.selfLabel ? this.getTags(data.data.selfLabel) : []
		}).catch(error => {
			console.error("获取用户信息失败：", error);
			uni.showToast({
				title: '获取失败！',
				icon: 'none',
				duration: 2000
			})
		});
	},
	data() {
		return {
			transe: true, //是否可以开启编辑功能
			avator: 'http://8.146.208.139:3000/avator/orignavator.png',
			sex: '',
			Name: '',
			phonenumber: '',
			if_change_avator: false,
			ShowDialog: false,
			TagList: [],
			TagValue: ''
		}
	},
	methods: {
		DelectTag(item) {
			console.log(item)
			this.TagList = this.TagList.filter(it => it != item)
		},
		getTags(str) {
			return str.split('/*/') ? str.split('/*/') : []
		},
		sureDialog() {
			if (this.TagValue.length > 5) {
				uni.showToast({
					icon: 'none',
					title: '请勿超过5个字哦',
					duration: 1000
				})
			} else if (this.TagValue.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请勿为空哦',
					duration: 1000
				})
			}
			else {
				this.TagList.push(this.TagValue)
				this.TagString += this.TagValue
				this.TagValue = ''
				this.ShowDialog = false
			}
		},
		hideModal() {
			this.ShowDialog = false
		},
		addTags() {
			if (this.TagList.length >= 3) {
				uni.showToast({
					icon: 'none',
					title: '最多三个标签哦',
					duration: 1000
				})
			} else {
				this.ShowDialog = true
			}
		},
		getimg() {
			if (this.transe === false) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res)
						const tempFilePath = res.tempFilePaths[0];
						this.avator = tempFilePath;
						this.if_change_avator = true
						// console.log(tempFilePath)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		},
		tranT() {
			this.transe = !this.transe
		},
		// 编辑之后提交
		uploadmes() {
			let TagString = ''
			this.TagList.forEach(item => {
				if (TagString != '') {
					TagString += '/*/'
				}
				TagString += item
			})
			// 男0女1
			let data = {
				avatar: this.avator,
				userName: this.Name,
				sex: this.sex === '男' ? 0 : 1,
				phoneNumber: this.phonenumber,
				selfLabel: TagString
			}
			console.log(data)
			putuserInfo(data).then(res => {
				console.log(res)
				this.transe = !this.transe
				console.log('这个是avator:   ' + this.avator)
				uni.showToast({
					title: '修改成功！',
					icon: 'none',
					duration: 2000
				})
			}).catch(err => {
				console.log(err)
				uni.showToast({
					title: '修改失败！',
					icon: 'none',
					duration: 2000
				})
			})
		},
		//点击编辑之后的提交
		tranF() {
			if (this.if_change_avator == true) {
				uploadimg(this.avator).then(res => {
					console.log('这是页面', res)
					let re = JSON.parse(res)
					// console.log(re)
					this.avator = re.data
					this.uploadmes()
					this.if_change_avator = false
				})
			} else {
				this.uploadmes()
			}
		}
	}
}
</script>